<template>
    <div class="body">
        <el-form :model="mdl" ref="ruleForm" label-width="130px">
            <el-form-item :label="$i18n.t('LOANED_ORDER_NO')" required :error="errors.loaned_order_no">
                <el-input :disabled="submitLogin" v-model="mdl.loaned_order_no" :placeholder="$i18n.t('PLEASE_INPUT', { value: $i18n.t('LOANED_ORDER_NO') })" @blur="onBlur" style="width: 100%"></el-input>
            </el-form-item>
            <el-form-item :label="$i18n.t('REPAYMENT_TYPE')" required :error="errors.type">
                <el-select :disabled="submitLogin" :placeholder="$i18n.t('PLEASE_SELECT', { value: $i18n.t('REPAYMENT_TYPE') })" v-model="mdl.type" style="width: 100%">
                    <el-option v-for="(option, index) in data.repayment_channel.type" :label="option.label" :value="option.value" :key="index"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item v-if="mdl.type === 2" :label="$i18n.t('PARTIAL_REPAYMENT_AMOUNT')" required :error="errors.amount">
                <el-input-number :disabled="submitLogin" v-model="mdl.amount" :min="100000"></el-input-number>
            </el-form-item>
            <el-form-item :label="$i18n.t('REPAYMENT_METHOD')" required :error="errors.repay_type">
                <el-select :disabled="submitLogin" :placeholder="$i18n.t('PLEASE_SELECT', { value: $i18n.t('REPAYMENT_METHOD') })" v-model="mdl.repay_type" style="width: 100%">
                    <el-option v-for="(option, index) in data.repayment_channel.channel" :label="option.label" :value="option.value" :key="index"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item :label="$i18n.t('REPAYMENT_CHANNEL')" required :error="errors.repay_channel">
                <el-select :disabled="submitLogin" :placeholder="$i18n.t('PLEASE_SELECT', { value: $i18n.t('REPAYMENT_CHANNEL') })" v-model="mdl.repay_channel" style="width: 100%">
                    <el-option v-for="(option, index) in bank" :label="option.label" :value="option.value" :key="index"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item :error="errors.submit">
                <el-button type="primary" @click="submitForm('ruleForm')" :loading="submitLogin" :disabled="btnDisable">{{ $i18n.t('SUBMIT') }}</el-button>
                <el-button @click="handleCloseDrawer">{{ $i18n.t('CANCEL') }}</el-button>
            </el-form-item>
            <el-form-item v-if="errorMessage !== ''">
                <Alert type="error" show-icon>{{ errorMessage }}</Alert>
            </el-form-item>
        </el-form>

        <div style="padding: 20px">
            <el-table border :data="detailTable">
                <el-table-column align="center" prop="desc"></el-table-column>
                <el-table-column align="center" prop="apply_amount" :label="$i18n.t('APPLY_AMOUNT')"></el-table-column>
                <el-table-column align="center" prop="interest_amount" :label="$i18n.t('INTEREST_AMOUNT')"></el-table-column>
                <el-table-column align="center" prop="overdue_amount" :label="$i18n.t('OVERDUE_AMOUNT')"></el-table-column>
                <el-table-column align="center" prop="renewal_amount" :label="$i18n.t('RENEWAL_AMOUNT')"></el-table-column>
                <el-table-column align="center" prop="remaining_repayment_amount" :label="$i18n.t('REMAINING_REPAYMENT_AMOUNT')"></el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
    import { getRepaymentDetail, generateRepaymentCode } from '@/api/fincance'

    export default {
        name: 'CreateRepaymentCodeFormModal',
        props: {
            handleCloseDrawer: {
                type: Function,
                required: true
            }
        },
        watch: {
            mdl: {
                handler () {
                    this.btnDisable = false
                },
                deep: true
            }
        },
        data () {
            return {
                errors: {
                    loaned_order_no: '',
                    type: '',
                    amount: '',
                    remark: ''
                },
                submitLogin: false,
                btnDisable: true,
                errorMessage: '',
                data: {
                    repayment_channel: {
                        type: [],
                        channel: [],
                        channel_list: []
                    },
                    fee: {}
                },
                mdl: {}
            }
        },
        computed: {
            bank () {
                // eslint-disable-next-line no-prototype-builtins
                if (this.data.repayment_channel.channel_list.hasOwnProperty(this.mdl.repay_type)) {
                    return this.data.repayment_channel.channel_list[this.mdl.repay_type]
                } else {
                    return []
                }
            },
            detailTable () {
                if (Object.keys(this.data.fee).length === 0) return []
                return [
                    {
                        desc: this.$i18n.t('CURRENT_AMOUNT'),
                        apply_amount: this.data.fee.apply_amount,
                        interest_amount: this.data.fee.interest_amount,
                        overdue_amount: this.data.fee.overdue_amount,
                        renewal_amount: this.data.fee.renewal_amount,
                        remaining_repayment_amount: this.data.fee.remaining_repayment_amount
                    }
                ]
            }
        },
        methods: {
            onBlur () {
                if (!this.mdl.loaned_order_no) return
                // 先清空表单错误提示
                this.errors = {}
                this.submitLogin = true
                // 设置手动接管message提示
                this.$store.dispatch('MessageTake', true)
                this.errorMessage = ''
                getRepaymentDetail(this.mdl.loaned_order_no).then(res => {
                    const { result } = res
                    this.data = result
                }).catch((error) => {
                    // 后端过来的表单错误回显
                    this.errors = Object.assign({}, { ...this.errors, ...error.errors })
                    // 手动处理错误
                    if (!error.errors) {
                        this.errorMessage = error.message
                    }
                }).finally(() => {
                    this.submitLogin = false
                })
            },
            submitForm () {
                // 先清空表单错误提示
                this.errors = {}
                this.submitLogin = true
                // 设置手动接管message提示
                this.$store.dispatch('MessageTake', true)
                this.errorMessage = ''
                generateRepaymentCode(this.mdl.loaned_order_no, this.mdl).then(() => {
                    // 关闭抽屉
                    this.handleCloseDrawer()
                    this.$Message.success(this.$i18n.t('HANDLE_SUCCESS'))
                    // 调用爷爷组件刷新数据
                    this.$parent.$parent.fetch()
                }).catch((error) => {
                    // 后端过来的表单错误回显
                    this.errors = Object.assign({}, { ...this.errors, ...error.errors })
                    // 手动处理错误
                    if (!error.errors) {
                        this.errorMessage = error.message
                    }
                }).finally(() => {
                    this.submitLogin = false
                })
            }
        }
    }
</script>

<style lang="less" scoped>
.body {
    padding-right: 25px;
    width: 100%;
}
/deep/ .el-checkbox__label {
    font-size: 12px;
}
</style>
